<template>
  <Panel
      padding="0"
      class="iv-cover-input">
      <Form ref="formCustom" label-position="top" :model="formItem" :rules="ruleValidate">
        <Row align="middle">
          <Col
            :xs="24"
            :md="12"
            :lg="12"
            :key="index + item.prop"
            class="iv-form-col"
            v-for="(item, index) in modalList"
            order="2">
            <FormItem
              class="iv-p-l-16 iv-p-r-16"
              :class="index >= modalList.length - 2 ? 'iv-m-b-0' : ''"
              :label="item.label"
              :prop="item.prop">
              <Input
                :value="item.value | valueFilter"
                v-if="item.type === 'Input'"
                @input="input"
                :class="`uit-form-${item.prop}`"
                @on-change="onChange(item)"
                :placeholder="`请输入${item.label}`" />
              <Select
                v-if="item.type === 'Select'"
                :placeholder="`请选择${item.label}`"
                @on-change="onChange(item)"
                @input="input"
                :class="`uit-form-${item.prop}`"
                :value="item.value | valueFilter">
                <Option
                  v-for="option in formItem[item.optionProp]"
                  :key="option.value"
                  :value="option.value">{{option.label}}</Option>
              </Select>
            </FormItem>
          </Col>
      </Row>
      </Form>
  </Panel>
</template>
<script>
/*
 * @description 循环查询prop对应值
 * @example
 * prop="a.b.c"
 */
import {getPropByPath} from '@/utils'
import {DatePicker, TimePicker, Slider} from 'iview'
/*
 * @description 引入定制化Panel组件，在特定情况下需要引入iview原生Panel,用于设置布局组件的间距
 * @example
 * import {Panel} from 'iview'
 */
import Panel from 'components/panel'
/*
 * @description 引入表单校验配置参数
 */
import ruleValidate from './validate'
/*
 * @description 引入表单配置列表
 */
import modalList from './modal-conf'
/*
 * @description 引入表单校验混合
 */
import mixinValidate from '@/mixins/validate'
let getRes = null
export default {
  mixins: [mixinValidate],
  props: {
    formItem: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    DatePicker,
    TimePicker,
    Slider,
    Panel
  },
  created () {
    this.ruleValidate = ruleValidate.call(this)
    this.modalList = modalList
    this.currentValue = ''
    getRes = getPropByPath(this, 'formItem')
  },
  filters: {
    valueFilter (val) {
      return getRes(val)
    }
  },
  methods: {
    validateFrom () {
      return this.validate('formCustom')
    },
    onChange (item) {
      let path = item.value.split('.')
      let lastKey
      let tempForm = this.formItem
      if (path.length === 1) return this.$set(this.formItem, path[0], this.currentValue)
      lastKey = path[path.length - 1]
      path.splice(path.length - 1, 1)
      for (let key of path) {
        tempForm = tempForm[key]
      }
      this.$set(tempForm, lastKey, this.currentValue)
    },
    input (val) {
      this.currentValue = val
    }
  }
}
</script>
<style lang="scss"></style>
